<template>
	<div id="container">
		<!-- 头部 -->
	<div style="font-size: 14px;">
	  <div style="display: flex;height: 40px;padding: 0 400px;background-color: #f5f5f5;">
	    <div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;">嗨，欢迎来到<span style="color: #b31e22;">开心发财</span></div>
	    <div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">帮助中心</div>
	    <div style="flex: 1;display: flex;">
	      <div style="flex: 1;"></div>
	      <div style="width: 500px;display: flex;">
            <li v-if="user">
            <el-button  type="text" style="color: #666;" class="top-title">您好,{{ user.nickName }}！</el-button>
            <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="toRegister">免费注册！</el-button>
            <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="toPersonalCenter">个人中心</el-button>
             <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="logout">退出登录</el-button>
            </li>

            <li v-else>
              <el-button  type="text" style="color: #666;" class="top-title" @click="toLogin">请登录</el-button>
              <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="toRegister">注册</el-button>
            </li>
        </div>
	    </div>
	  </div>
	  <div style="margin: 0 400px;height: 100px;line-height: 100px;">
	    <div style="display: flex;">

	      <div v-if="user" style="width: 200px;height: 100px;">
	        <img :src="avatarImg" style="cursor: pointer;width: 100px;height: 100px;" class="header_img">
	      </div>
        <div v-else style="width: 200px;height: 100px;">
          <img src="../../assets/no_login.jpg" style="cursor: pointer;width: 100px;height: 100px;" class="header_img">
        </div>

	      <div style="flex: 1;text-align: center;padding: 0 50px;">
	        <el-input placeholder="请输入关键词" v-model="keyword" style="width: 100%;margin-top: 30px;">
	          <el-button slot="append" icon="el-icon-search" @click="postSearch"></el-button>
	        </el-input>
<!--          <input type="text" v-model="keyword" placeholder="请输入关键词" class="search-input" style="width: 50%;margin-top: 30px;">
          <router-link :to="'/searchdetail/' + keyword" class="search-button">搜索</router-link>-->
	      </div>

	      <div  v-if="user" style="width: 200px;text-align: center;">
	        <el-button type="warning" icon="el-icon-shopping-cart-2" @click="gwcSucceed()">购物车 {{carts}} 件</el-button>
	      </div>

        <div  v-else style="width: 200px;text-align: center;">
          <el-button type="warning" icon="el-icon-shopping-cart-2" @click="gwcFailure()">购物车 0 件</el-button>
        </div>
	    </div>
	  </div>
	</div>


		<el-row>
		<!--轮播图-->
      <!-- 一级菜单 -->
      <el-col :span="4" :offset="1" class="cateList">
        <div class="cate_img">
          <i class="el-icon-office-building"></i>
          商品分类
        </div>
        <el-menu
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            :collapse="isCollapse"
            :collapse-transition="false"
        >
          <el-submenu v-for="menu1 in menuList" :key="menu1.id" :index="String(menu1.id)">
            <template slot="title">{{ menu1.categoryName }}</template>
            <el-submenu v-for="menu2 in menu1.children" :key="menu2.id" :index="String(menu2.id)">
              <template slot="title">{{ menu2.categoryName }}</template>
              <!--<el-menu-item v-for="menu3 in menu2.children" :key="menu3.id" :index="String(menu3.id)">
                {{ menu3.categoryName }}
              </el-menu-item>-->
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-col>

		  <el-carousel :interval="4000" type="card" height="350px">
		     <el-carousel-item v-for="(item,index) in images" :key="index">
           <img :src="item.src" style="width: 100%; height: 100%;">
		     </el-carousel-item>
		   </el-carousel>
		</el-row>


    <el-row style="margin-left:-10px;">
      <h2 style="margin-left: 30px;">水果热销</h2>
      <el-col :span="3" v-for="(result, index) in fruitsList" :key="result.id" :offset="index > 0 ? 2 : 0">
        <el-card :body-style="{ padding: '0px' }" class="shopcard">
          <img :src="result.imgLink" class="image">
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <span>{{ result.goodsInfo.name }}</span><br/><br/>
              <span>单位：{{ result.goodsInfo.unit }}</span><br/><br/>
              <span>价格：{{ result.goodsInfo.price }}￥</span><br/><br/>
              <el-button type="text" class="button" @click="buyNow(result)">查看商品</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-left:-10px;">
      <h2 style="margin-left: 30px;">酒水热销</h2>
      <el-col :span="3" v-for="(result, index) in drinksList" :key="result.id" :offset="index > 0 ? 2 : 0">
        <el-card :body-style="{ padding: '0px' }" class="shopcard">
          <img :src="result.imgLink" class="image">
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <span>{{ result.goodsInfo.name }}</span><br/><br/>
              <span>单位：{{ result.goodsInfo.unit }}</span><br/><br/>
              <span>价格：{{ result.goodsInfo.price }}￥</span><br/><br/>
              <el-button type="text" class="button" @click="buyNow(result)">查看商品</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

	  <!-- 尾部 -->
	  <div style="font-size: 14px;">
	    <div style="margin: 50px 400px 50px 400px;">
	      <div style="display: flex;">
	        <div style="flex: 1;display: flex;">
	          <div style="">
	            <div class="foot-title">帮助中心</div>
	            <div class="foot-item">账户管理</div>
	            <div class="foot-item">购物指南</div>
	            <div class="foot-item">订单操作</div>
	          </div>
	          <div style="margin-left: 100px;">
	            <div class="foot-title">服务支持</div>
	            <div class="foot-item">账户管理</div>
	            <div class="foot-item">购物指南</div>
	            <div class="foot-item">订单操作</div>
	          </div>
	          <div style="margin-left: 100px;">
	            <div class="foot-title">线下门店</div>
	            <div class="foot-item">账户管理</div>
	            <div class="foot-item">购物指南</div>
	            <div class="foot-item">订单操作</div>
	          </div>
	          <div style="margin-left: 100px;">
	            <div class="foot-title">支付方式</div>
	            <div class="foot-item">账户管理</div>
	            <div class="foot-item">购物指南</div>
	            <div class="foot-item">订单操作</div>
	          </div>
	        </div>
	        <div style="width: 250px;border-left: 1px solid #dfdfdf;text-align: center;">
	          <div style="color: #19b4ea;font-weight: bold;font-size: 18px;line-height: 40px;">000-123456789</div>
	          <div style="color: gray;">周一至周日8:00~18:00</div>
	          <div style="color: gray;margin-bottom: 10px;">（节假日不休）</div>
	          <el-button type="success" round icon="el-icon-headset">24小时客服在线</el-button>
	        </div>
	      </div>

	    </div>
	    <div style="background-color: #19b4ea;height: 40px;text-align: center;line-height: 40px;color: #FFFFFF;">
	      申明：本网页仅供学习参考 @XXX XXX XXX
	    </div>
	  </div>
	  </div>
</template>

<script>
  export default {

      data() {
        return {
          //商品搜索关键字
          keyword: '',
          //用户ID
          sysUsersId:'',
          //用户头像
          avatarImg:this.$store.state.user.avatarImg,
          images: [
            {id:0,src:require('../../assets/轮播图/水果轮播图.jpg')},
            {id:1,src:require('../../assets/轮播图/牛奶轮播图.jpg')},
            {id:2,src:require('../../assets/轮播图/肉畜轮播图.jpg')},
            {id:3,src:require('../../assets/轮播图/蔬菜轮播图.jpg')},
            {id:4,src:require('../../assets/轮播图/零食轮播图.jpg')},
            {id:5,src:require('../../assets/轮播图/饮料轮播图.jpg')}
          ],
          //商品分类
          menuList: [],
          //购物车数量
          carts:'',
          //水果热销
          fruitsList:[],
          //酒水热销
          drinksList:[],
          currentDate: new Date(),
          input:'',
          menuIndex: 1,
          user: JSON.parse(localStorage.getItem("user")),
          //是否折叠的标志
          isCollapse: false
        }
      },
      methods: {
        //获取所有的侧边栏菜单
        async getMenuList(){
          const {data: res} = await this.$http.post(`/goodsCategory/GoodsCategoryNameList`)
          this.menuList =res
        },
        //获取购物车数量
        async getCarts(){
          this.sysUsersId=this.$store.state.user.sysUsersId
          const {data: res} = await this.$http.post(`/cartInfo/selCarts/${this.sysUsersId}`)
          this.carts =res
        },
         /* 登录 */
        toLogin(){
        this.$router.push("/login");
		  },
       /* 注册 */
        toRegister(){
        this.$router.push("/register");
		  },
        /* 个人中心 */
        toPersonalCenter(){
        this.$router.push("/personalcenter");
      },
        /* 退出登录 */
        logout() {
          this.$router.push("/login");
          localStorage.removeItem("user");
          this.$message.success("退出成功");
        },
        /* 登录后的购物车 */
        gwcSucceed() {
          this.$router.push("/ShoppingTrolley");
        },
        /* 没有登录的购物车 */
        gwcFailure() {
          this.$message.error('您还没有登录，请登录后查看您的购物车！')
        },
        async postSearch(){
          if(this.keyword){
            let keyword = this.keyword;
            this.$router.push('/searchdetail/' + keyword)
          }
        },
        //查询水果热销
        async fruits(){
          const {data: res} = await this.$http.post(`/goodsInfo/selFruits`)
          this.fruitsList =res
          console.log("水果热销",res)
        },
        //查询酒水热销
        async drinks(){
          const {data: res} = await this.$http.post(`/goodsInfo/selDrinks`)
          this.drinksList =res
          console.log("饮料热销",res)
        },
        async buyNow(result) {
          // 跳转到商品详情页，并传递商品信息
          if(result.goodsInfo.id) {
            let id = result.goodsInfo.id;
            this.$router.push('/goods/'+ id);
          }
        }
      },
      created() {
        this.getMenuList()
        this.getCarts()
        this.fruits()
        this.drinks()
      }
    };
</script>

<style scoped>
	/* 头部 */
  .header_img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  /*鼠标移入图片实现3d动画*/
  .header_img:hover{
    transform-style: preserve-3d;
    transform:rotateY(360deg);
    transition: all 1500ms;
    -moz-transform-style: preserve-3d;
    -moz-transform:rotateY(45deg);
    -moz-transition: all 1500ms;
  }

	.top-title:hover{
	  cursor: pointer;
	  color: #b31e22!important;
	}


	/*产品展示、购买、分类简介区*/
	#container{
		position: relative;
		margin: 0px auto;
		width: 100%;
		background: rgba(245, 245, 245, 0.5);
	}
	#container .el-row .el-col{
		height: 100%;
	}
	.el-row .cateList .cate_img{
		width: 94.3%;
		text-indent: 14px;
		height: 40px;
		color: white;
		line-height: 40px;
		font-size: 16px;
		background: #F10215;
	}

	.el-menu-vertical-demo{
		 max-height: 300px; /* customize as needed */
		  overflow-y: auto;
	}

	/* 图片轮播 */
  .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }


  /*水果热销*/
  .image {
    width: 250px;
    height: 230px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .shopcard{
    width: 250px;
    height: 310px;
    margin-left: 20px;
    transition: transform 0.3s, opacity 0.3s; /* 添加过渡效果 */

  }

  .shopcard:hover{
    transform: scale(1.1); /* 缩放卡片至 1.1 倍大小 */
  }

	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }

	  .button {
	    padding: 4%;
		padding-top: 1px;
	    float: right;
	  }

	  .image {
	    width: 100%;
	    display: block;
	  }

	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }

	  .clearfix:after {
	      clear: both
	  }
	  .shopcard{
		  width: 250px;
		  height: 360px;
		  margin-left: 30px;
	  }

	  /* 尾部 */
	  .foot-title{
	    height: 40px;
	    line-height: 40px;
	  }
	  .foot-item{
	    height: 25px;
	    line-height: 25px;
	    color: gray;
	  }
	  .foot-item:hover{
	    cursor: pointer;
	    color: #e37a2f;
	  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 4%;
    padding-top: 1px;
    float: right;
  }
</style>